<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index-my.css">
    <link rel="stylesheet" href="css/form-my.css">
    <link rel="stylesheet" href="css/bootstrapValidator.min.css">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <!--小屏幕按钮 绑定事件可下拉-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--logo-->
            <a href="index.html" class="navbar-brand">Veng Su</a>
        </div>
        <!--导航栏-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">首页</a></li>
                <li><a href="video.html">视屏</a></li>
                <li><a href="introduce.html">个人介绍</a></li>
                <li><a href="./mobile/index.html">Mobile</a></li>
                <li><a href="form.html">登录</a></li>
                <li><a href="form.html">注册</a></li>
            </ul>
        </div>
    </div>
</nav>
<section id="form">
<form id="form-test" class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email 正确： suveng@163.com">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password： 正确 123">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" id="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
</section>

<div class="hidden-lg hidden-md ">
    <footer class="modal-footer " id="footer">
        <div class="container">
            <p class="text-center">something | something | something</p>
            <p class="text-center">suveng Powered by Bootstrap.</p>
        </div>
    </footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>

<script type="application/javascript">
    $(function () {
        $("#form-test").bootstrapValidator({
            live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            submitButtons: '#submit',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: '通用的验证失败消息',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputEmail: {
                    validators: {
                        emailAddress: {//验证email地址
                            message: '不是正确的email地址'
                        },
                        notEmpty: {//检测非空
                            message: '请输入邮箱'
                        },
                    }
                },
                inputPassword: {
                    validators: {
                        notEmpty: {//检测非空
                            message: '请输入密码'
                        },
                    }
                },
            }
        });



        $("#submit").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
            $("#form-test").bootstrapValidator('validate');//提交验证
            if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                valid();
            }else {
                alert("验证失败")
            }
        });
    });
    function valid() {
        var email=$("#inputEmail").val();
        var password=$("#inputPassword").val();
        if (email === "suveng@163.com") {
            if (password === "123")
            alert("登录成功");
            else alert("password 错误")
        }else{
            alert("email 错误")
        }
    }
</script>
</body>
</html>